<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="home">
{
  style: {
    navigationStyle: 'custom',
    // navigationBarTitleText: '',
  },
  anonymous: true
}
</route>

<script lang="ts" setup>
import { useAppStore } from '@/stores'

defineOptions({
  name: 'Home',
})

const { statusBarHeight, navBarHeight } = useAppStore()

// 轮播
const swiperList = ref([
  '/static/images/banner/banner1.jpg',
  '/static/images/banner/banner1.jpg',
])

const onSwiperClick = () => {
  // uni.navigateTo({ url: '/pages/temp/charge' })
}

const gotoShop = () => {
  uni.switchTab({ url: '/pages/shop/index' })
}

const gotoSchedule = () => {
  uni.switchTab({ url: '/pages/schedule/index' })
}

const gotoCart = () => {
  uni.navigateTo({ url: '/pages/shop/cart/index' })
}

const gotoFeedBack = () => {
  uni.showToast({
    icon: 'none',
    title: '敬请期待~',
  })
}

const gotoExam = () => {
  uni.navigateTo({ url: '/pages/exam/list' })
}

const todo = () => {
  uni.showToast({
    icon: 'none',
    title: '敬请期待~',
  })
}
</script>

<template>
  <image class="background" mode="widthFix" src="/static/images/banner-bg.png" :draggable="false" />
  <view class="bg-white px tab-page" :style="{ paddingTop: `${statusBarHeight}px` }">
    <view :style="{ height: `${navBarHeight}px` }" class="flex-row-start-center">
      <text class="logo-title z-1">
        秉烛未晚 学必有得
      </text>
    </view>

    <view class="my w-full">
      <wd-swiper :list="swiperList" autoplay :indicator="{ type: 'dots-bar' }" @click="onSwiperClick" />
    </view>

    <view class="z-1 my flex-row-between-center px">
      <view class="fun-item">
        <image src="/static/icons/icon-info.svg" class="fun-icon" @click="todo" />
        <text class="fun-text">
          秉学动态
        </text>
      </view>
      <view class="fun-item">
        <image src="/static/icons/icon-schedule.svg" class="fun-icon" @click="gotoSchedule" />
        <text class="fun-text">
          课程安排
        </text>
      </view>
      <view class="fun-item">
        <image src="/static/icons/icon-feedback.svg" class="fun-icon" @click="gotoFeedBack" />
        <text class="fun-text">
          家长反馈
        </text>
      </view>
      <view class="fun-item">
        <image src="/static/icons/icon-comment.svg" class="fun-icon" @click="gotoShop" />
        <text class="fun-text">
          在线选课
        </text>
      </view>
    </view>
    <view class="my" style="height: 164rpx;">
      <image class="h-full w-full rounded-1" mode="aspectFill" src="/static/images/bingxue.jpeg" :draggable="false" />
    </view>

    <view class="section">
      教育专栏
    </view>
    <view class="grid-container my">
      <image class="item1 h-full w-full" src="/static/images/ljxk.png" mode="scaleToFit" @click="gotoShop" />
      <image class="item2 h-full w-full" src="/static/images/stbg.png" mode="scaleToFit" @click="gotoExam" />
      <image class="item3 h-full w-full" src="/static/images/gwc.jpg" mode="scaleToFit" @click="gotoCart" />
      <image class="item4 h-full w-full" src="/static/images/ldx.png" mode="scaleToFit" @click="todo" />
    </view>
  </view>
</template>

<style lang="scss" scoped>
.background {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 0;
  height: 564rpx;
}
.logo-title {
  font-size: 18px;
  font-weight: 500;
  line-height: 25px;
  text-align: center;
  background: linear-gradient(91.76deg, #13D085 -3.31%, #0A6A44 115.2%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.fun-item {
  z-index: 1;
}
.fun-icon {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 8rpx;
  width: 44px;
  height: 44px;
}
.fun-text {
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  text-align: center;
  color: #1D2129;
  z-index: 1;
}
.grid-container {
  display: grid;
  grid-template-columns: 230rpx 212rpx 212rpx;
  grid-template-rows: 200rpx 150rpx;
  grid-gap: 16rpx;
}

.item1 {
  grid-row-start: 1;
  grid-row-end: 3;
}
.item4 {
  grid-column-start: 2;
  grid-column-end: 4;
}
</style>
